<template>
    <view class="login-container">
        <view class="login-title">登录</view>
        <input placeholder="请输入手机号" v-model="phone" class="input-field" />
        <input placeholder="请输入密码" v-model="password" type="password" class="input-field" />
        <button @tap="login" class="login-button">登录</button>
        <view class="register-link" @tap="goToRegister">还没有账号？去注册</view>
    </view>
</template>

<script>
    var _self
    export default {
        data() {
            return {
                phone: '',
                password: ''
            };
        },
        created() {
            _self = this
        },
        methods: {
            login() {
                uni.request({
                    url: "https://api.xiaoyaoyou.hanfenga7.cn/api/v1/user/login",
                    dataType: "json",
                    responseType: "json",
                    method: "POST",
                    data: {
                        "password": this.password,
                        "phone": this.phone,
                    },
                    success(res) {
                        if (res.data.code == 200) {
                            uni.showToast({
                                title: '用户登录成功',
                                icon: 'success'
                            });
                            console.log(res.data)
                            setTimeout(() => {
                                uni.reLaunch({
                                    url: '/pages/my/my'
                                });
                            }, 1000);
                            uni.setStorageSync('token', res.data.data.token)
                            uni.setStorageSync('phone', _self.phone)
                        } else {
                            uni.showToast({
                                title: res.data.msg,
                                icon: 'error'
                            });
                        }
                    },
                })
            },
            getUserInfo() {
                const token = uni.getStorageSync('token');
                uni.request({
                    url: ' https://api.xiaoyaoyou.hanfenga7.cn/api/v1/user/info/',
                    method: 'GET',
                    header: {
                        Authorization: 'Bearer ' + token
                    },
                    success: (res) => {
                        if (res.data.code === 200) {
                            const userId = res.data.data.id;
                            console.log('获取用户信息 res  1', res.data.data);
                            uni.navigateTo({
                                url: '/pages/userInfo/userInfo'
                            });
                        } else {
                            uni.showToast({
                                title: res.data.msg,
                                icon: 'error'
                            });
                        }
                    },
                    fail: (err) => {
                        uni.showToast({
                            title: '获取用户信息请求失败，请检查网络连接',
                            icon: 'error'
                        });
                        console.error('获取用户信息请求失败: ', err);
                    }
                });
            },
            goToRegister() {
                uni.navigateTo({
                    url: '/pages/register/register'
                });
            }
        }
    };
</script>

<style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

   .login-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
        background-color: #f9fafb;
        font-family: 'Inter', sans-serif;
    }

   .login-title {
        font-size: 1.75rem;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 1.5rem;
    }

   .input-field {
		width: 240px;

        padding: 0.75rem 1rem;
        margin-bottom: 1rem;
        border: 1px solid #e5e7eb;
        border-radius: 0.5rem;
        font-size: 1rem;
        color: #1f2937;
        transition: border-color 0.2s ease;
    }

   .input-field:focus {
        border-color: #3b82f6;
        outline: none;
    }

	/* 登录按钮样式 */
   .login-button {
        width: 40%;
		margin-top: 0.5rem;
		line-height: 1;
		
		padding: 0;
		background-color: #3b82f6;
		color: white;
		border: none;
		border-radius: 0.75rem;
		box-shadow: 0 6px 12px rgba(59, 130, 246, 0.3);
		transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
		font-size: 1rem;
		font-weight: 500;
		cursor: pointer;
		height: 48px;
		display: flex;
		align-items: center;
		justify-content: center;
    }

   .login-button:hover {
        background-color: #2563eb;
    }

   .login-button:active {
        transform: scale(0.98);
    }

   .register-link {
        color: #3b82f6;
        margin-top: 1rem;
        cursor: pointer;
        transition: color 0.2s ease;
    }

   .register-link:hover {
        color: #2563eb;
    }
</style>    